<template>
	<view class="content">
		<u-navbar :background="navObj" :is-back="false" :is-fixed="true" height="89" width="100%">
			<div class="title">我的收藏</div>

			<view class="left-box" @tap="onClickLeft">
				<u-icon name="arrow-left" size="40" color="#FFF"></u-icon>
			</view>
		</u-navbar>

		<u-tabs active-color="#28C749" :list="navList" :is-scroll="false" :current="tabCurrentIndex" @change="tabClick">
		</u-tabs>
		<view class="swiper-box">
			<!-- 显示商品栏 -->
			<view v-if="tabCurrentIndex == 0" class="tab-content">
				<scroll-view class="list-scroll-content" scroll-y>
					
					<u-empty style="margin-top: 40rpx" text="暂无收藏商品数据" mode="favor" v-if="goodList.length == 0"></u-empty>
					<u-swipe-action  :show="item.id == currentShowIndex" btn-width="200"
						:options="LeftOptions" v-else v-for="(item, index) in goodList"
						 :index="index" :key="index" @open="openLeftChange(item, index)" @click="clickGoodsSwiperAction(item, 2)" >
						<view class="goods" @click="goGoodsDetail(item)">
							<u-image width="131rpx" height="131rpx" :src="item.image.split(',')[0]" mode="aspectFit">
								<u-loading slot="loading"></u-loading>
							</u-image>
							<view class="goods-intro">
								<view>{{ item.name }}</view>
								<view>￥{{ item.price | unitPrice }}</view>
								<view class="goods-sn" @click.stop="goStoreMainPage(item.storeId)">进店</view>
								
							</view>
						</view>
					</u-swipe-action>

				</scroll-view>
			</view>





			<!-- 显示收藏的店铺栏 -->
			<view v-else class="tab-content">
				<scroll-view class="list-scroll-content" scroll-y>
					<!-- 空白页 -->
					<u-empty style="margin-top: 40rpx" text="暂无收藏店铺数据" mode="favor" v-if="storeList.length == 0"></u-empty>
					<!-- 店铺展示数据 -->
					<u-swipe-action @open="openLeftChange(item)" :show="item.id == currentShowIndex" btn-width="180"
						:options="LeftOptions" v-else v-for="(item, index) in storeList" :key="index"
						@click="clickGoodsSwiperAction(item, 1)">
						<view class="store" @click="goStoreMainPage(item.storeId)">
							<view class="intro">
								<view class="store-logo">
									<u-image width="102rpx" height="102rpx" :src="item.image" :alt="item.name"
										mode="aspectFit">
										<u-loading slot="loading"></u-loading>
									</u-image>
								</view>
								<view class="store-name">
									<view>{{ item.name }}</view>
									
								</view>
								<view class="store-collect">
									<view>进店逛逛</view>
								</view>
							</view>
						</view>
					</u-swipe-action>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>

	import {
		userCollectPage
	} from "@/api/user.js"
	import storage from "../../utils/storage";
	import {userDelCollect} from '@/api/user.js'
	export default {
		data() {
			return {
				navObj: {
					backgroundColor: 'rgb(25, 189, 93)',
				},
				// 商品左滑侧边栏
				LeftOptions: [{
					text: "删除",
					style: {
						backgroundColor: this.$lightColor,
					},
				}, ],
				tabCurrentIndex: 0, 
				navList: [
					
					{
						name: "商品",
						params: {
							page: 1,
							limit: 10,
							type: 2
						},
					},
					{
						name: "店铺",
						params: {
							page: 1,
							limit: 10,
							type: 1,
						},
					},
				],
				goodList: [], //商品集合
				storeList: [], //店铺集合
				currentShowIndex: null
			};
		},

		mounted() {
			this.getData(0);
			this.getData(1)
		},

		onReachBottom() {
			if(this.tabCurrentIndex == 0){
				this.navList[0].params.page  = this.navList[0].params.page + 1
				
			}else{
				this.navList[1].params.page  = this.navList[1].params.page + 1
			}
			this.getData(this.tabCurrentIndex)
		},

		methods: {
			onClickLeft() {
				uni.navigateBack();
			},

			getData(tabCurrentIndex){
				const { navList }  = this
				// console.log(navList[tabCurrentIndex])
				userCollectPage({
					type: navList[tabCurrentIndex].params.type,
					userId: storage.getUserInfo().id,
					page: navList[tabCurrentIndex].params.page,
					limit: navList[tabCurrentIndex].params.limit
				}).then(res => {
					if(tabCurrentIndex == 0){
						this.goodList = [...this.goodList, ...res.data.list]
					}
					
					if(tabCurrentIndex == 1){
						this.storeList = [...this.storeList, ...res.data.list]
					}
				})
			},

			/**
			 * 打开商品左侧取消收藏
			 */
			openLeftChange(val) {
				this.currentShowIndex = val.id
			},

			/**
			 * 点击商品左侧取消收藏
			 */
			clickGoodsSwiperAction(val, type) {
				// 取消收藏
				userDelCollect({
					collectId: val.id,
					type,
					userId: storage.getUserInfo().id,
				}).then((res) => {
					if(res.code == '000000'){
						this.navList[this.tabCurrentIndex].params.page = 1;
						if(this.tabCurrentIndex == 0){
							this.goodList = []
						}else {
							this.storeList = []
						}
						this.getGoodList(this.tabCurrentIndex == 0 ? 2 : 1);
					}
				});
			},

	

			/**
			 * 顶部tab点击
			 */
			tabClick(index) {
				this.tabCurrentIndex = index;
			},

			/**
			 * 查看商品详情
			 */
			goGoodsDetail(val) {
				//商品详情
				uni.navigateTo({
					url: "/pages/product/goods?id=" + val.id ,
				});
			},

			/**
			 * 查看店铺详情
			 */
			goStoreMainPage(id) {
				//店铺主页
				uni.navigateTo({
					url: "/pages/product/shopPage?id=" + id,
				});
			},

			/**
			 * 获取商品集合
			 * 1: 商家
			 * 2: 商品
			 */
			getGoodList(type) {
				uni.showLoading({
					title: "加载中",
				});
				if (type == 1) {
					// 如果是商店

					userCollectPage({
						...this.navList[1].params,
						userId: storage.getUserInfo().id
					}).then(res => {
						if (this.$store.state.isShowToast) {
							uni.hideLoading()
						};
						uni.stopPullDownRefresh();
						if (res.data.length == 0) {
							this.navList[1].params.page = this.navList[1].params.page - 1;
							uni.showToast({
								title: this.navList[1].params.page == 0 ? '暂无收藏商店' : '暂无更多'
							})
						} else {
							this.storeList.push(...res.data);
						}

					})
				}

				if (type == 2) {
					// 如果是商品
					userCollectPage({
						...this.navList[0].params,
						userId: storage.getUserInfo().id
					}).then(res => {
						if (this.$store.state.isShowToast) {
							uni.hideLoading()
						};
						uni.stopPullDownRefresh();
						if (res.data.length == 0) {
							this.navList[0].params.page = this.navList[0].params.page - 1;
							uni.showToast({
								title: this.navList[0].params.page == 0 ? '暂无收藏商品' : '暂无更多'
							})
						} else {
							this.goodList.push(...res.data);
						}
					})

				}
			},
		},

		/**
		 * 下拉刷新时
		 */
		onPullDownRefresh() {
			if (this.tabCurrentIndex == 0) {
				this.navList[0].params.page = 1;
				this.goodList = [];
				this.getGoodList();
			} else {
				this.navList[1].params.page = 1;
				this.storeList = [];
				this.getStoreList();
			}
		},
	};
</script>

<style lang="scss">
	page,
	.content {
		background: $page-color-base;
		height: 100%;
	}

	.title {
		position: absolute;
		top: 70rpx;
		left: 50%;
		transform: translateX(-50%);
		font-family: PingFang;
		font-weight: bold;
		font-size: 33rpx;
		color: #FFFFFF;

	}

	.left-box {
		padding-left: 41rpx;
	}

	.slot-wrap {
		flex: 1;
		display: flex;
		justify-content: center;
		padding-right: 72rpx;
	}

	.content {
		width: 100%;
	}

	.swiper-box {
		overflow-y: auto;
	}

	.list-scroll-content {
		height: 100%;
		width: 100%;
	}

	/deep/ .u-swipe-content {
		overflow: hidden;
	}

	.goods {
		background-color: #fff;
		border-bottom: 1px solid $border-color-light;
		height: 190rpx;
		display: flex;
		align-items: center;
		padding: 30rpx 20rpx;
		margin-top: 20rpx;

		image {
			width: 131rpx;
			height: 131rpx;
			border-radius: 10rpx;
		}

		.goods-intro {
			flex: 1;
			font-size: $font-base;
			line-height: 48rpx;
			margin-left: 30rpx;

			view:nth-child(1) {
				line-height: 1.4em;
				font-size: 24rpx;
				max-height: 2.8em; //height是line-height的整数倍，防止文字显示不全
				overflow: hidden;
				color: #666;
			}

			view:nth-child(2) {
				color: #cccccc;
				font-size: 24rpx;
			}

			view:nth-child(3) {
				color: $light-color;
			}
		}

		button {
			color: $main-color;
			height: 50rpx;
			width: 120rpx;
			font-size: $font-sm;
			padding: 0;
			line-height: 50rpx;
			background-color: #ffffff;
			margin-top: 80rpx;

			&::after {
				border-color: $main-color;
			}
		}
	}

	.store {
		background-color: #fff;
		border: 1px solid $border-color-light;
		border-radius: 16rpx;
		margin: 20rpx 10rpx;

		.intro {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx 0 40rpx;
			height: 170rpx;

			.store-logo {
				width: 102rpx;
				height: 102rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.store-name {
				flex: 1;
				margin-left: 30rpx;
				line-height: 2em;

				:first-child {
					font-size: $font-base;
				}

				:last-child {
					font-size: $font-sm;
					color: #999;
				}
			}

			.store-collect {
				border-left: 1px solid $border-color-light;
				padding-left: 20rpx;
				text-align: center;

				:last-child {
					color: #999;
					font-size: $font-sm;
				}
			}
		}
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 26rpx;

			text {
				position: relative;
			}

			text.current {
				color: $light-color;
				font-weight: bold;
				font-size: 28rpx;

				&::after {
					content: "";
					position: absolute;
					left: 20rpx;
					bottom: -10rpx;
					width: 30rpx;
					height: 0;
					border-bottom: 2px solid $light-color;
				}
			}
		}
	}
</style>
